<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/js/vue.js"></script>
  <script src="/js/axios.min.js"></script>
  <script src="../js/lib-master/index.js"></script>

  <link rel="stylesheet" href="../js/lib-master/theme-chalk/index.css">
  <link rel="stylesheet" href="/css/Backstage.css">
  <script src="/js/jquery.js"></script>
  <style>
    iframe{
        height: 570px;
        width: 100%;
    }
  </style>
</head>

<body>
  <div class="container" id="app">
    <!-- 头顶导航栏 -->
    <div class="header">
      <div class="list">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="insert">  
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="orderlist">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          <el-breadcrumb-item>订单信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="userlist">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>人员管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="emplist">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>人员管理</el-breadcrumb-item>
          <el-breadcrumb-item>员工列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="datalist">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据统计</el-breadcrumb-item>
          <el-breadcrumb-item>详细信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <button class="quit">退出</button>
    </div>
    <!-- 侧面导航栏 -->
    <div class="app">
      <el-col :span="12" style="width: 100%;">
        <el-menu default-active="2" class="el-menu-vertical-demo" 
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <p class="iconp">
                <i><img class="icon" src="/img/商品.png" alt="user"></i>
                <span> 商品管理</span>
              </p>
            </template>
            <el-menu-item index="1-1" id="list" class="el-item" style="color: #FFDD4B;">
              <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品列表</span>
            </el-menu-item>
            <el-menu-item index="1-2" id="insert" class="el-item"> <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加商品</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <p class="iconp">
                <i><img class="icon" src="/img/订单.png" alt="user"></i>
                <span> 订单管理</span>
              </p>
            </template>
            <el-menu-item index="1-1" id="orderlist" class="el-item">
              <span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单信息</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <p class="iconp">
                <i><img class="icon" src="/img/权限.png" alt="user"></i>
                <span> 人员管理</span>
              </p>
            </template>
            <el-menu-item index="1-1" id="user_list" class="el-item">
              <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户列表</span>
            </el-menu-item>
            <el-menu-item index="1-2" id="emp_list" class="el-item">
              <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;员工列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <p class="iconp">
                <i><img class="icon" src="/img/统计数据.png" alt="user"></i>
                <span> 统计数据</span>
              </p>
            </template>
            <el-menu-item index="1-1" id="data_statistics" class="el-item"><span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详细信息</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </div>

    <div class="main" style="flex-direction: row;">
      <div class="product-list" id="app" >
        <iframe src="backProductView.html"></iframe>
      </div>
      <div class="product-insert">
        <iframe src="backProductAddView.html"></iframe>
      </div>
      <div class="order-msg">
        <iframe src="backOderView.html"></iframe>
      </div>
       <!-- 用户列表 -->
       <div class="user-list" >
        <iframe src="backUserView.html"></iframe>
      </div>
      <!-- 员工列表 -->
      <div class="emp-list" >
        <iframe src="backEmpView.html"></iframe>
      </div>
      <!-- 数据统计 -->
      <div class="data-statistics">
        <iframe src="backDataView.html"></iframe>
      </div>
    </div>

    

  </div>
  <script src="/js/backcommon.js"></script>
  <script>

    let vm = new Vue({
      el: "#app",
    
    })
  </script>
  <script src="/js/Backstage.js"></script>
</body>

</html>